<script setup>
import { ref } from "vue";
import waterContent from "@/assets/waterContent/content.json";
import chinaAddress from "@/assets/address/data_geo.json";

const props = defineProps({
  each: {
    type: Array,
    default: function () {
      return [];
    },
  },
});

const tbHead = ref([]);
const tbBody = ref([]);
const initData = () => {
  for (const key in waterContent.foul) {
    let a = {
      key: key,
      name: waterContent.foul[key]["name"],
    };
    tbHead.value.push(a);
  }
  tbBody.value = props.each;
  for (let i = 0; i < tbBody.value.length; i++) {
    chinaAddress.some((item) => {
      if (String(item.value) === tbBody.value[i].countryId) {
        tbBody.value[i].name = item.label;
      }
    });
  }
};
initData();
</script>

<template>
  <div id="container">
    <table>
      <tr>
        <th>区（县）</th>
        <th v-for="item in tbHead" :key="item.key">
          {{ item.name }}
        </th>
      </tr>
      <tr v-for="(row, index) in tbBody" :key="row.name" :v-if="index < 6">
        <th style="font-weight: lighter">{{ row.name }}</th>
        <th
          v-for="item in tbHead"
          :key="item.key"
          style="font-weight: lighter; color: #79e0f1"
        >
          {{ Number(row.foulWaterQuality[item.key]).toFixed(2) }}
        </th>
      </tr>
    </table>
  </div>
</template>

<style lang="scss" scoped>
#container {
  height: 100%;
  width: 100%;
  color: #fff;
  table {
    height: 100%;
    width: 100%;
  }
}
</style>